<script type="text/x-template"  id="goodsSelectComponent">
    <el-popover placement="bottom" v-model="show" width="550" trigger="click" @show="showPopover" @after-enter="afterEnterPopover">
        <el-input v-model="queryData.name" placeholder="商品名"   style="width:150px;" :size="size" clearable>
        </el-input>
        <el-button icon="el-icon-search" type="primary" @click="query()" :size="size"></el-button>
        <el-table :data="datagrid" @row-click="selectTask" v-loading="loading">
            <el-table-column prop="shopName" label="店铺名"  show-overflow-tooltip> </el-table-column>
			<el-table-column prop="name" label="商品名"  show-overflow-tooltip> </el-table-column>
			<el-table-column prop="classifyName" label="分类名"  show-overflow-tooltip></el-table-column>
        </el-table>
       	<div style="margin:10px">
			    <el-pagination
			      :current-page="queryData.page"
			      :page-sizes="[5, 10]"
			      :page-size="queryData.rows"
			      layout="prev, pager, next, sizes"
			      :total="totalNum"
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      @prev-click="handlePrevClick"
			      @next-click="handleNextClick">
			    </el-pagination>
		 </div>
        <el-input v-if="!multiple" id="selectUser" v-model="value" :readonly="readonly" :clearable="clearable" :size="size" @clear="clear" @change="change" suffix-icon="el-icon-search" slot="reference" style="width:100%;">璇烽�夋嫨鐢ㄦ埛</el-input>
    	<div v-if="multiple" style="width:100%;min-height:28px;border:1px solid #dbdfe6;margin-top: 5px;background-color: white;" slot="reference">
			<el-tag
  					v-for="tag in multipleData"
  					:key="tag.id"
					size="small"
  					closable
					style="margin:0 3px;"
					@close="closeTag(tag)"
					>
  					{{tag.name}}
			</el-tag>
		</div>
	</el-popover>
</script>
<script type="text/javascript">
		var goodsSelectComponentJs = {
			template:'#goodsSelectComponent'
			, props: {
				size:{
					type: String
					,default:'small'
				}
				,value:{
					type: String
					,default:''
				}
				,showDept:{
					type: Boolean
					,default:false
				}
				,readonly:{
					type: Boolean
					,default:true
				}
				,clearable:{
					type: Boolean
					,default:false
				}
				,multiple:{
					type: Boolean
					,default:false
				}
				,shopId:{
					type: String
					,default:''
				}
			}
			,data() {
				return {
					queryData:{activeFlag:'1',page:1,rows:5}
					,datagrid:[]
					,totalNum:0
					,show: false
					,loading: false
					,multipleData:[]
				}
			}
			,methods:{
				selectTask:function(row, event, column){
					if(this.show){
						this.value = row.name;
						this.selectedRow = row;
						if(this.multiple){
							var vm = this;
							var has = false;
							for(var i=0;i<vm.multipleData.length;i++){
								if(vm.multipleData[i].id==row.id){
									has = true;
								}
							}
							if(!has){
								this.multipleData.push(row);
							}
						}
						this.$emit('selected',row);
					}
					this.show = false;
				}
				,query:function(){
					var vm = this;
					vm.loading = true;
					vm.queryData.shopId = vm.shopId;
					$.ajax({
						url :staticURL+'/mall/goods/datagrid?',
						data : vm.queryData,
						dataType : 'json',
						async:false,
						success : function(json) {
							vm.datagrid = json.rows;
							vm.totalNum = json.total;
							vm.selectedRow = null;
							vm.loading = false;
						}
					});
				}
				,handleSizeChange:function(val){
					var app = this;
					app.queryData.rows=val;
					app.query();
				}
				,handleCurrentChange:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
				,handlePrevClick:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
				,handleNextClick:function(val){
					var app = this;
					app.queryData.page=val;
					app.query();
				}
				,clear:function(val){
					this.$emit('clear');
				}
				,change:function(val){
					this.$emit('change');
				}
				,afterEnterPopover:function(){
					if(this.datagrid.length==0){
						this.query();
					}
				}
				,showPopover:function(){
					if(this.datagrid.length==0){
						this.loading=true;
					}
				}
				,setValue(v){
					this.value = v;
				}
				,closeTag(tag){
					this.multipleData.splice(this.multipleData.indexOf(tag), 1);
					this.$emit('selected',{});
				}
				,getMultipleData(){
					return this.multipleData;
				}
				,setMultipleData(data){
					this.multipleData = data;
				}
				,getMultipleDataName(){
					var t = "";
					this.multipleData.find(
						function(item){
							if(t){
								t = t+","+item.name;
							}else{
								t = item.name;
							}
						}	
					);
					return t;
				}
				,getMultipleDataId(){
					var t = "";
					this.multipleData.find(
						function(item){
							if(t){
								t = t+","+item.id;
							}else{
								t = item.id;
							}
						}	
					);
					return t;
				}
			}
		}
</script>
